<template>
  <div>
    <a-form @submit="handleSubmit" :form="form" style="width:40%;;margin:0 auto;">
      <a-row>
        <a-col :xs="{ span : 24 }" :sm="{ span:7 }" class="formGroupTitle">重置支付密码</a-col>
      </a-row>
      <a-form-item v-bind="formItemLayout" label="新支付密码" help="支付密码为6位纯数字密码">
        <a-input class="input-width" placeholder="请输入新支付密码" v-decorator="[
                        'paypwd',
                        {
                            rules: [{
                            required: true, message: '请输入新支付密码',
                            },{ validator: validateToNextpayword }
                            ],validateTrigger: 'blur'
                        }
                        ]" type="password" />
      </a-form-item>
      <a-form-item v-bind="formItemLayout" label="确认新支付密码">
        <a-input class="input-width" placeholder="确认新支付密码" v-decorator="[
                        'paypwdagain',
                        {
                            rules: [{
                            required: true, message: '确认新支付密码',
                            }, {
                            validator: compareToFirstpayword,
                            }],validateTrigger: 'blur'
                        }
                        ]" type="password" />
      </a-form-item>
      <div style="text-align:center;">
        <a-button size="large" htmlType="submit" type="primary">确定</a-button>
      </div>
    </a-form>
    <a-modal title="支付密码重置成功！" v-model="visible" :footer="null">
      <div style="text-align:center;">
        <a-button type="primary" @click="goindex">确定</a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
  import AForm from "ant-design-vue/es/form/Form";
  import ATabs from "ant-design-vue/es/tabs";

  import AFormItem from "ant-design-vue/es/form/FormItem";
  import AInput from "ant-design-vue/es/input/Input";
  import AIcon from "ant-design-vue/es/icon";
  import AInputGroup from "ant-design-vue/es/input/Group";
  import AButton from "ant-design-vue/es/button/button";
  import ACol from "ant-design-vue/es/grid/Col";
  import ARow from "ant-design-vue/es/grid/Row";
  import ACheckbox from "ant-design-vue/es/checkbox/Checkbox";
  import AAlert from "ant-design-vue/es/alert/index";
  import api from "@/common/api";
  import { get, post } from "@/common/api";

  const ATabPane = ATabs.TabPane;

  export default {
    name: "Login",
    components: {
      AAlert,
      ACheckbox,
      ACol,
      ARow,
      AButton,
      AInputGroup,
      AIcon,
      AInput,
      AFormItem,
      ATabPane,
      ATabs,
      AForm
    },
    data() {
      return {
        visible: false,
        form: this.$form.createForm(this),
        error: "",
        paypwd: "",
        paypwdagain: "",
        login: false,
        formItemLayout: {
          labelCol: {
            xs: { span: 24 },
            sm: { span: 7 }
          },
          wrapperCol: {
            xs: { span: 24 },
            sm: { span: 12 },
            md: { span: 10 }
          }
        }
      };
    },
    watch: {},
    computed: {},
    mounted() { },
    methods: {
      handleChange(value) {
        console.log(value);
      },
      handleSubmit(e) {
        e.preventDefault();
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log("Received values of form: ", values);
            this.ResetPay();
          }
        });
      },
      ResetPay() {
        var params = { scope: "resetPwd", key: localStorage.getItem("mobileNo") };
        api.fetchPubKey(
          params,
          res => {
            if (res.code == "OK") {
              let data = {
                onePwd: api.getEncryptData(res.data.pubKey, this.paypwd),
                twoPwd: api.getEncryptData(res.data.pubKey, this.paypwdagain),
                key: params.key
              };
              api.ResetPayPaw(
                data,
                res => {
                  if (res.code == "OK") {
                    this.visible = true;
                  } else {
                    this.$message.error(res.message);
                  }
                },
                err => { }
              );
            }
          },
          error => {
            alert("错误");
          }
        );
      },
      // 支付密码验证
      validateToNextpayword(rule, value, callback) {
        const form = this.form;
        const reg = new RegExp("^[0-9]{6}$");
        if (value && !reg.test(value)) {
          // form.validateFields(['confirm'], { force: true });
          callback("您输入支付密码的格式有误！");
        } else {
          console.log("支付密码", value);
          this.paypwd = value;
        }
        callback();
      },
      compareToFirstpayword(rule, value, callback) {
        const form = this.form;
        if (value && value !== form.getFieldValue("paypwd")) {
          callback("两次输入的支付密码不一致!");
        } else {
          this.paypwdagain = value
          callback();
        }
      },
      handleOk() {
        this.$router.push("/home");
      },
      goindex() {
        this.visible = false;
        this.$router.push("/userindex");
      }
    }
  };
</script>

<style lang="less" scoped>
  span {
    cursor: pointer;
  }
</style>